@mixin leveled-bg($hover, $active) {
    &:hover {
        &:not(:disabled) {
            background: rgba($hover, 0.08);
        }
    }

    &:active,
    &.is-active {
        &:not(:disabled) {
            background: rgba($active, 0.08);
        }
    }

    &.is-active {
        &:active,
        &:hover {
            &:not(:disabled) {
                background: rgba($active, 0.16);
            }
        }

        &:hover {
            &:active:not(:disabled) {
                background: rgba($active, 0.24);
            }
        }
    }
}

@mixin leveled-color($hover, $active) {
    &:hover {
        &:not(:disabled) {
            color: rgba($hover, 0.75);
        }
    }

    &:active,
    &.is-active {
        &:not(:disabled) {
            color: rgba($active, 1);
        }
    }
}

.Button {
    position: relative;
    padding: 4px 10px;
    border-radius: 4px;
    color: rgba(var(--center-channel-color-rgb), 0.75);
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;

    &.ReplyButton {
        overflow:visible;
        height: 24px;
        padding-left: 8px;
    }

    &.FollowButton {
        overflow:visible;
        height: 24px;
    }

    &.allowTextOverflow {
        min-width: 4rem;

        .Button_label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    &:hover {
        text-decoration: none;
    }

    &:disabled {
        opacity: 32%;
    }

    &.Button___transparent {
        border: none;
        background: transparent;

        @include leveled-bg(
            $hover: var(--center-channel-color-rgb),
            $active: var(--button-bg-rgb),
        );
        @include leveled-color(
            $hover: var(--center-channel-color-rgb),
            $active: var(--button-bg-rgb),
        );
    }

    &.Button___large {
        font-size: 14px;

        &.Button___icon {
            width: 32px;
            height: 32px;
            padding: 7px 0;
            font-size: 18px;
            line-height: 18px;
        }
    }

    .Button_label {
        display: inline-block;
        max-width: 100%;

        &.margin_top {
            margin-top: 4px;
        }
    }

    .Button_prepended {
        margin-right: 0.4em;
    }

    .Button_appended {
        margin-left: 0.4em;
    }

    .dot {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(var(--sidebar-text-active-border-rgb), 1);
    }
}

.separated + .separated {
    // --button-separator-gap should always be even
    margin-left: var(--button-separator-gap, 0);
}

.separated:not(.Button),
.separated:not(:hover):not(.is-active) {
    + .separated:not(.Button),
    + .separated:not(:hover):not(.is-active) {
        position: relative;

        &::before {
            position: absolute;
            top: 50%;
            left: calc(-0.5px - var(--button-separator-gap, 0px) / 2);
            display: inline-block;
            width: 1px;
            height: var(--button-separator-height, 100%);
            background: rgba(var(--center-channel-color-rgb), 0.16);
            content: '';
            pointer-events: none;
            transform: translateY(-50%);
        }
    }
}
